<template>
  <div class="pageList-wrapper">
    <el-dialog
      title="页面设置"
      width="1200px"
      :visible.sync="pageListVisible">
      <div class="pageList-header">
          <div class="addPageGroupList">
              <el-button v-if="hasPermission('model:model:add')" type="primary" size="mini" @click="add">新增</el-button>
          </div>
          <section class="model-name">
              <span>{{modelName}}</span>
          </section>
          <section class="model-describe">
              <p>描述: <span>{{modelDescribes}}</span></p>
          </section>
      </div>
      <div class="pageList-content">
        <div class="content-header">
          <el-select clearable v-model="currentPage" placeholder="请选择" @change="handlePageChange">
            <el-option
              v-for="item in tableData"
              :key="item.index"
              :label="item.pageName"
              :value="item.pageCode">
            </el-option>
          </el-select>
        </div>
        <div class="content-groups">
          <el-collapse v-model="activePageGroup" accordion>
            <el-collapse-item v-for="(pageGroup, index) of pageGroupList" :name="index" :key="index">
              <template slot="title">
                <i class="header-icon el-icon-folder"></i>
                {{pageGroup.groupName}}<span>(数据项:{{pageGroup.list.length}})</span>
              </template>
              <div class="pageGroup-table">
                <div class="table-operation">
                  <el-button @click="editPageGroup(pageGroup)">修改分组名称</el-button>
                </div>
                <el-table
                  :data="pageGroup.list"
                  style="width: 100%">
                  <el-table-column label="数据项标识码" prop="itemSn" width="145"></el-table-column>
                  <el-table-column label="标签名称" prop="itemLable" width="107"></el-table-column>
                  <el-table-column label="格式" prop="itemFormat" width="153">
                    <template slot-scope="scope">
                      {{$dictUtils.getDictLabel("componentType", scope.row.itemFormat, "")}}
                    </template>
                  </el-table-column>
                  <el-table-column label="页面控制" width="154">
<!--                    <template slot-scope="scope">-->
<!--                      <el-checkbox-group v-model="pageControl">-->
<!--                        <el-checkbox label="禁用"></el-checkbox>-->
<!--                        <el-checkbox label="只读"></el-checkbox>-->
<!--                        <el-checkbox label="必填"></el-checkbox>-->
<!--                      </el-checkbox-group>-->
<!--                    </template>-->
                  </el-table-column>
                  <el-table-column prop="itemDictCode" label="业务数据字典" width="148">

                  </el-table-column>
                  <el-table-column class="default-type" label="默认值" width="170">
                    <template slot-scope="scope">
                      <span v-if="scope.row.itemDefaultType === 1">固定值</span>
                      <span v-if="scope.row.itemDefaultType === 2">无</span>
                      <span v-if="scope.row.itemDefaultType === 3">列表第一项</span>
                      <span v-if="scope.row.itemDefaultType === 4">自定义</span>
                      <span>{{scope.row.itemDefaultValue}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="itemTip" label="提示语" width="191">

                  </el-table-column>
                  <el-table-column prop="tenantAutho" label="租户权限" width="175">

                  </el-table-column>
                  <el-table-column prop="sorts" label="显示顺序" width="95">
                  </el-table-column>
                  <el-table-column prop="address" label="操作" width="110">
                    <template slot-scope="scope">
                      <el-link type="primary" :underline="false" v-if="hasPermission('model:page:edit') && scope.row.tenantAutho === 2" @click="editPageDate(scope.row)">修改
                      </el-link>
<!--                      <el-link type="primary" :underline="false" @click="del(scope.row.id)">删除-->
<!--                      </el-link>-->
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
<!--    <el-button @click="dialogVisible = false">取 消</el-button>-->
<!--    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>-->
  </span>
    </el-dialog>
<!--    <pageFrom ref="pageFrom" @refreshDataList="refreshList(page, '')"></pageFrom>-->
    <addPageGroup ref="addPageGroup" @refreshDataList="refreshList(page, '')"></addPageGroup>
    <addPageDataForm ref="addPageDataForm" @refreshDataList="refreshList(page, '')"></addPageDataForm>
    <editPageData ref="editPageData" @refreshDataList="refreshList(page, '')"></editPageData>
  </div>
</template>
<script>
  // import pageFrom from './pageFrom'
  import addPageGroup from './addPageGroup'
  import addPageDataForm from './addPageDataForm'
  import editPageData from './editPageData'
  // import PopoverBut from '@/components/button/popoverBut'
  const options1 = []
  export default {
    components: {
      // pageFrom,
      // PopoverBut,
      addPageGroup,
      addPageDataForm,
      editPageData
    },
    data () {
      return {
        pageListVisible: false,
        checkedProps: options1,
        ShowCloum: {
          createDate: ''
        },
        options: [{
          label: '上次操作时间',
          key: '2'
        }, {
          label: '创建时间',
          key: 'createDate'
        }],
        page: {
          pageSize: 10,
          pageNo: 1,
          total: 0
        },
        tableData: [],
        loading: false,
        modelId: '',
        modelName: '',
        modelDescribes: '',
        currentPage: '',
        currentTableData: 0,  // 当前页面的index值
        pageGroupList: [],
        activePageGroup: 0,
        pageId: '',
        pageControl: []
      }
    },
    methods: {
      init (method, obj) {
        if (method === 'list') {
          this.pageListVisible = true
          this.modelId = obj.id
          this.modelName = obj.names
          this.modelDescribes = obj.describes
          this.refreshList(this.page)
        }
      },
      // 新增
      add () {
        this.$refs.addPageGroup.init(
          'add', this.tableData[this.currentTableData],
            this.modelId
        )
      },
      // 获取页面列表
      refreshList (params) {
        this.loading = true
        this.$http({
          url: '/model/pageList',
          method: 'get'
        }).then(({
          data
        }) => {
          if (data.code === '200') {
            this.tableData = data.result
            console.log('page', this.tableData)
            this.currentPage = this.tableData[0].pageName
            console.log('page', this.tableData)
            if (this.modelId) {
              this.getPageGroupList(this.currentTableData + 1)
            }
            this.loading = false
          }
        })
      },
      // 获取页面分组
      getPageGroupList (pageCode) {
        this.$http({
          url: '/model/getPageDetailList',
          method: 'get',
          params: {
            modelId: this.modelId,
            pageCode: pageCode
          }
        }).then(({data}) => {
          console.log('111111', data)
          this.pageGroupList = data.result
        })
      },
      // 添加数据项
      addPageData (pageGroup) {
        this.$refs.addPageDataForm.init('add', {
          pageData: this.tableData[this.currentTableData],
          modelId: this.modelId,
          pageGroup: pageGroup
        })
      },
      // 修改页面分组
      editPageGroup (pageGroup) {
        this.$refs.addPageGroup.init('edit', this.tableData[this.currentTableData], this.modelId, pageGroup)
      },
      // 修改页面数据
      editPageDate (dataItem) {
        this.$refs.editPageData.init('edit', dataItem)
      },
      del (id) {
        let ids = id || this.dataListSelections.map(item => {
          return item.id
        }).join(',')
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((res) => {
          this.loading = true
          this.$http({
            url: '/model/approveItem/delete',
            method: 'delete',
            params: {'ids': ids}
          }).then(({data}) => {
            if (data && data.success) {
              this.$message.success(data.message)
              this.refreshList(this.page, 'tipCode', 'asc')
            }
            this.loading = false
          })
        })
      },
      // 页面发生改变时触发
      handlePageChange (event) {
        this.currentTableData = event - 1
        this.getPageGroupList(this.currentTableData + 1)
      }
      // 排序
      // sortthiscolumn (a) {
      //   console.log(a)
      //   this.orderBy.name = a.prop
      //   this.page.pageNo = 1
      //   if (a.order === 'ascending') {
      //     this.orderBy.method = 'asc'
      //   } else {
      //     this.orderBy.method = 'desc'
      //   }
      //   this.refreshList(this.page, this.orderBy.name, this.orderBy.method)
      // },
      // 是否显示某列数据
      // handlerCloumn (e) {
      //   this.checkedProps = e
      //   // console.log(e)
      // },
      // handleCurrentChange (e) {
      //   this.page.pageNo = e
      //   this.refreshList(this.page, '')
      // },
      // tableRowClassName ({ row, rowIndex }) {
      //   if (rowIndex % 2 === 1) {
      //     return 'warning-row'
      //   } else {
      //     return 'success-row'
      //   }
      // }

    },
    mounted () { // dom加载完以后执行的函数，比如第一次打开网页要请求表格数据可以在这个里面写函数
      this.refreshList(this.page, '')
    }
  }
</script>
<style lang="scss" scoped>
  .pageList-wrapper{
    ::v-deep.el-dialog{
      .el-dialog__body{
        padding: 20px !important;
        .pageList-header{
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #333333;
          p{
            margin: 0;
          }
            .model-name{
                margin-bottom: 10px;
                span{
                    display: inline-block;
                    padding: 5px 10px;
                    border:1px solid #1890ff;
                    color: #1890ff;
                    border-radius: 4px;
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                }
            }
            .model-describe{
                font-size: 12px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #999999;
                line-height: 18px;
                margin-bottom: 10px;
            }
        }
          .pageList-content{
              .content-header{
                  .el-select{
                      width: 230px !important;
                  }
              }
              .content-groups{
                  margin-top: 10px;
              }
          }
        .default-type{
          span{
            display: inline-block;
            border: 1px solid #AAAAAA;
            margin-right: 10px;
            padding: 3px 9px;
          }
        }
      }
    }
  }
</style>
